<template>
  <div class="header">
    <div class="el-menu">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="1">待审核</el-menu-item>
        <el-menu-item index="2">审核中</el-menu-item>
        <el-menu-item index="3">已审核</el-menu-item>
        <el-menu-item index="4">异常</el-menu-item>
      </el-menu>
    </div>
    <search
      @search-params-btn-emits="searchParamsBtnEmits"
      @reset-params-btn-emits="resetParamsBtnEmits"
    />
  </div>

  <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }"
    height="70vh"
  >
    <el-table-column label="任务ID" prop="id" width="200"> </el-table-column>
    <el-table-column label="文件名" prop="fileName" width="200"> </el-table-column>
    <el-table-column label="任务类型" prop="taskType" width="150">
      <template #default="scope">
        <span>
          {{ scope.row.taskType == '1' ? '手动excel导⼊任务' : '手动同步外部数据任务' }}
        </span>
      </template>
    </el-table-column>

    <el-table-column label="创建时间" width="200" prop="createtime"> </el-table-column>

    <el-table-column label="操作" v-if="apiStore.taskStatus != '1' && apiStore.taskStatus != '4'">
      <template #default="scope">
        <el-text type="primary" @click="jumpTo(scope.$index, scope.row)"> 查看任务明细 </el-text>
        <el-text
          type="primary"
          style="padding-left: 20px"
          @click="handleDownload(scope.$index, scope.row)"
          v-if="apiStore.taskStatus != '2'"
        >
          下载审核结果
        </el-text>
        <el-text
          type="primary"
          style="padding-left: 20px"
          v-if="apiStore.taskStatus == '2'"
          @click="stop(scope.row)"
        >
          强制停止
        </el-text>
        <el-popconfirm title="确定删除吗?" @confirm="del(scope.row)">
          <template #reference>
            <el-text type="primary" style="padding-left: 20px" v-if="apiStore.taskStatus == '3'">
              删除
            </el-text>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 20px"
    v-model:current-page="apiStore.page.pageNum"
    v-model:page-size="apiStore.page.pageSize"
    background
    layout="total, prev,sizes, pager, next"
    :total="apiStore.page.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <!-- <Dialog ref="dialogRef"></Dialog> -->
</template>

<script lang="ts" setup>
import useApiStore from '@/store/api/index.js'
import { useRouter } from 'vue-router'
import { ref, watch, reactive } from 'vue'
import Search from '@/views/search/cpns/search.vue'
import Dialog from '@/views/home/cpns/dialog.vue'
import { ElMessage } from 'element-plus'
import { getError, deleteMainTask } from '@/utils/api'
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  apiStore.taskStatus = key
  tableData.value = apiStore.queryList.mainTaskList.filter((item: any) => {
    console.log('item.status == key', item.status == key)
    return item.status == key
  })

  console.log(`key-${key}, keyPath ${keyPath}`)
}

const apiStore = useApiStore()
// const page = reactive({
//   pagenum: 1,
//   size: 10,
//   total: 40
// })

let tableData = ref([
  // {
  //   id: 'TASK202501202128321',
  //   create_time: '2024-07-23 16:31:35',
  //   update_time: '2024-07-23 16:31:35',
  //   type: '手动上传',
  //   name: ' 20250118.xls'
  // }
])
const dialogRef = ref()
const router = useRouter()

watch(
  () => apiStore.queryList,
  (New, Old) => {
    tableData.value = New.mainTaskList.filter((item: any) => {
      return item.status === apiStore.taskStatus
    })

    apiStore.page.total = New.total
  },
  { deep: true }
)
//获取仓库列表
const getWarehouse = async () => {
  const res = await apiStore.getQueryList({
    pageNum: apiStore.page.pageNum,
    pageSize: apiStore.page.pageSize
  })
}
getWarehouse()

//修改table元素
const jumpTo = (index: number, row: any) => {
  router.push({ path: '/main/search/detail', query: { id: row.id, name: row.name } })
}

const jumpToGoods = (row) => {
  // router.push({ name: 'goods',params: { id: row.id } })

  // router.push({ name: 'user', params: { userId: '123' }})

  router.push({ path: '/main/goods', query: { id: row.id, name: row.name } })
}

//size大小切换
const handleSizeChange = () => {
  getWarehouse()
}

//当前页切换
const handleCurrentChange = () => {
  getWarehouse()
  // loginStore.getUserListInfoAction(page.value, size.value)
}
const handleDownload = async (index: number, row: any) => {
  const res = await apiStore.downResultExcelFile({ filePath: row.resultFilePath }, row.fileName)
}
// import ftpClient from 'ftp-client'
// // var ftpClient = require('./lib/client.js'),
//     const config = {
//         host: 'localhost',
//         port: 21,
//         user: 'anonymous',
//         password: 'anonymous@'
//     }
//     const options = {
//         logging: 'basic'
//     }
//     const client = new ftpClient(config, options);

//     console.log('ftpclient--',client);
// client.connect(function () {

//     client.upload(['test/**'], '/public_html/test', {
//         baseDir: 'test',
//         overwrite: 'older'
//     }, function (result) {
//         console.log(result);
//     });

//     client.download('/public_html/test2', 'test2/', {
//         overwrite: 'all'
//     }, function (result) {
//         console.log(result);
//     });

// });

//条件查询用户信息
const searchParamsBtnEmits = (searchParams: any) => {
  const params = {
    pageNum: apiStore.page.pageNum,
    pageSize: apiStore.page.pageSize,
    ...searchParams
  }
  apiStore.getQueryList(params)
}
const stop = (e: any) => {
  getError({ id: e.id }).then((res: any) => {
    if (res.msg == 'ok') {
      ElMessage.success('操作成功')
      apiStore.getQueryList({
        pageNum: apiStore.page.pageNum,
        pageSize: apiStore.page.pageSize
      })
    }
  })
}
const del = (e: any) => {
  deleteMainTask({ id: e.id }).then((res: any) => {
    if (res.msg == 'ok') {
      ElMessage.success('删除成功')
      apiStore.getQueryList({
        pageNum: apiStore.page.pageNum,
        pageSize: apiStore.page.pageSize
      })
    }
  })
}
</script>

<style scoped lang="scss">
.el-menu {
  // margin: 20px 0;
  // padding-bottom: 20px;
  margin-bottom: 20px;
  width: 100%;

  .el-menu--horizontal.el-menu {
    border: none;
  }
}

.el-text {
  cursor: pointer;
}
</style>
